<script lang="ts" setup>
  import { Avatar } from '@arco-design/web-vue';
  import { ref, toRefs } from 'vue';
  import type { FollowRecord } from '/@/api/model/recommendModel';
  import { followUser } from '/@/api/user';

  const props = withDefaults(
    defineProps<{
      data: FollowRecord;
    }>(),
    {},
  );
  const { data } = toRefs(props);

  const followLoading = ref(false);
  const isFollowing = ref(data.value.is_following);

  const getSubscribe = async (data: FollowRecord) => {
    followLoading.value = true;

    await followUser(data.id, data.is_following);
    isFollowing.value = !isFollowing.value;

    followLoading.value = false;
  };
</script>
<template>
  <div class="mb-[10px]">
    <a-space class="flex justify-between mb-[6px]">
      <a :href="'/user/' + data.id + '/posts'" target="_blank">
        <a-space>
          <Avatar><img :src="data.icon" /></Avatar>
          <div>
            <div class="text-black">{{ data.name }}</div>
            <div class="text-[12px]">粉丝数：{{ data.follower }}</div>
          </div>
        </a-space>
      </a>
      <a-button type="primary" size="small" @click="getSubscribe(data)" :loading="followLoading">{{
        isFollowing ? '已关注' : '关注'
      }}</a-button>
    </a-space>
    <a-typography-paragraph type="secondary" class="break-words" ellipsis>
      {{ data.introduce }}
    </a-typography-paragraph>
  </div>
</template>
